import './Bar.less';

import React, { SFC } from 'react';
import Wave from '../../../Ui/Space/Wave/Wave';
export type Types = 'play' | 'status' | 'record' | 'next' | 'list';
interface BarProps {
    played: boolean;
    onClick?: (type: Types) => void;
}
const Bar: SFC<BarProps> = ({ played, onClick }) => {
    const dataKey = 'status';
    function _onClick(event: React.MouseEvent) {
        const ss = (event.target as HTMLElement).dataset[dataKey] as Types;
        // eslint-disable-next-line no-unused-expressions
        onClick?.(ss);
    }
    return (
        <>
            <div
                style={{
                    display: 'flex',
                    marginBottom: 20,
                    alignItems: 'center',
                    width: '100%'
                }}
            >
                <Wave
                    onClick={() => {
                        // eslint-disable-next-line no-unused-expressions
                        onClick?.('status');
                    }}
                    isPaused={!played}
                    delay={0.15}
                />
                <span
                    style={{
                        width: 'calc(100% - 30px)',
                        marginLeft: 10,
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        overflow: 'hidden'
                    }}
                >
                    {name}
                </span>
            </div>
            <div className="radio-ctrl-bar">
                <div className="radio-ctrl-bar_left-area">
                    <i className="fas fa-clipboard-list" data-status="list" onClick={_onClick} />
                    {!played && <i className="fas fa-play" data-status="play" onClick={_onClick} />}
                    {played && (
                        <i className="fas fa-step-forward" data-status="next" onClick={_onClick} />
                    )}
                </div>
                <button
                    className="radio-ctrl-bar_sound-record"
                    data-status="record"
                    onClick={_onClick}
                >
                    record
                </button>
            </div>
        </>
    );
};
export default Bar;
Bar.defaultProps = {
    played: false
};
